<template>
	<view>
		<view class="view-top">
			<view class="zuoce-renwulan">
				<u-icon name="list" color="#FFFDFF" size="23" bold class="icon" @click="tanchu"></u-icon>
				<u-popup :show="showgerxinxi" mode="left" @close="close" customStyle="width:350px">
					<view class="tanchuang-body">
						<view style="font-size: 20px;margin-left: 20px;margin-top: 13px;">
							北笙
							<u-icon name="arrow-right" size="20" customStyle="margin-top:-20px;margin-left:40px">
							</u-icon>
							<view
								style="width: 100px;height: 30px;background: #2D2F40;border-radius: 10px;font-size: 12px;color: white;margin-left: 200px;margin-top: -27px;">
								<u-icon name="integral-fill" color="#2979ff" size="18"
									customStyle="margin-top:5px;margin-left:6px"></u-icon>
								<view style="margin-left: 30px;margin-top: -18px;">
									闪耀新星
								</view>
							</view>
						</view>
						<view
							style="width: 320px;height: 200px;background: white;margin-left: 15px;margin-top: 10px;overflow: hidden;">
							<view
								style="width: 280px;height: 130px;margin-left: 20px;margin-top: 8px;border-bottom: 2px solid #F3F3F3;">
								<view style="width: 140px;height: 130px;overflow: hidden;" @click="myAccount">
									<view
										style="width: 100px;height: 20px;margin-top: 25px;border-left: 3px solid #B5785B; font-size: 18px;line-height: 20px;">
										<text style="margin-left: 10px">我的账户</text>
										<u-icon name="arrow-right" size="20"
											customStyle="margin-top:-19px;margin-left:82px"></u-icon>
									</view>
									<view style="width: 100px;height: 65px;">
										<text style="font-size: 28px;margin-left: 8px;font-weight: 900;">
											{{todayMoney}}
										</text>元
										<view style="font-size: 11px;color: #9B9B9C;margin-top: 5px;margin-left: 10px;">
											今日预计收入
										</view>
									</view>
								</view>

								<view
									style="width: 140px;height: 130px;overflow: hidden;margin-left:160px;margin-top: -130px;"
									@click="orderStatistics">
									<view
										style="width: 100px;height: 20px;margin-top: 25px;border-left: 3px solid #2F8865; font-size: 18px;line-height: 20px;">
										<text style="margin-left: 10px">订单统计</text>
										<u-icon name="arrow-right" size="20"
											customStyle="margin-top:-19px;margin-left:82px"></u-icon>
									</view>
									<view style="width: 100px;height: 65px;">
										<text style="font-size: 28px;margin-left: 8px;font-weight: 900;">
											{{ordersNumber}}
										</text>单
										<view style="font-size: 11px;color: #9B9B9C;margin-left: 6px;margin-top: 4px;">
											今日完成单
										</view>
									</view>
								</view>
							</view>
							<view style="width: 200px;height: 30px;margin-top: 18px;margin-left: 24px;">
								<u--image :showLoading="true" src="../../../static/违规申诉.jpg" width="20px" height="25px">
								</u--image>
								<view style="margin-left: 23px;margin-top: -24px;">违规申诉</view>
							</view>
							<view style="width: 200px;height: 30px;margin-top: -30px;margin-left: 178px;">
								<u--image :showLoading="true" src="../../../static/我的评价.jpg" width="20px" height="25px">
								</u--image>
								<view style="margin-left: 25px;margin-top: -25px;">我的评价</view>
							</view>
						</view>
						<view style="margin-left: 15px;margin-top: 30px;">
							<u--image :showLoading="true" src="../../../static/1.jpg" width="320px" height="125px">
							</u--image>
						</view>
						<view style="width: 100%;height: 130px;margin-top: 30px;background: white;">
							<u-cell-group title-bg-color="rgb(243, 244, 246)">
								<u-cell :titleStyle="{fontWeight: 500}" :title="item.title"
									v-for="(item, index) in listtext" :key="index" isLink :icon="item.iconUrl"
									@click="showToast(item)">
								</u-cell>
							</u-cell-group>
						</view>
						<view style="width: 100%;height: 220px;margin-top: 30px;background: white;overflow: hidden;">
							<view style="font-size: 20px;font-weight: 544;margin-left: 20px;margin-top: 18px;">骑手服务
							</view>
							<view style="width: 90%;height: 600px;margin: 0 auto;">
								<!-- 骑手服务 -->
								<u-row customStyle="margin-bottom: 10px" class="u-myGrid"
									style="overflow: hidden;margin-left: -18px;">
									<u-grid :border="false" col="4" style="width: 360px;">
										<u-grid-item v-for="(listItem,listIndex) in listicon" :key="listIndex"
											style="width: 85px;">
											<u-image :customStyle="{paddingTop:10+'rpx'}" :src="listItem.name"
												width="50px" height="50px"></u-image>
											<text class="grid-text">{{listItem.title}}</text>
										</u-grid-item>
									</u-grid>
									<u-toast ref="uToast" />
								</u-row>
							</view>
						</view>
						<view
							style="width: 100%;height: 40px;border-top: 2px solid #F3F3F3;background: white;text-align: center;margin-top: 34px;">
							<text style="line-height: 40px;font-size: 18px;">协议与规则</text>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="zuoce-zhuangtai">
				<u-icon name="clock-fill" :color="iconcolor" size="15" class="icon-a"></u-icon>
				<u-button @click="show = true" :color="color" class="button">{{name}}</u-button>
			</view>
			<view class="zuoce-tishi">
				<u-icon name="bell-fill" color="#FFFDFF" size="23" bold class="icon"></u-icon>
			</view>
			<u-subsection :list="list1" :current="curNow" @change="sectionChange" @close="show = false"
				class="subsection" bgColor="#1A1A1A" inactiveColor="#827F7F" bold></u-subsection>
			<u-action-sheet :actions="list" :show="show" @select="selectClick"></u-action-sheet>
		</view>
		<view class="view-body1" v-if="zanwudingdan">
			<u--image :showLoading="true" src="../../../static/内容为空.png" class="image"></u--image>
			<view style="font-size: 20px;margin-left: 160px;margin-top: 20px;">暂无订单</view>
		</view>
		<view class="view-body" v-if="renwu">
			<view class="view-mess" v-for="(item) in orders" :key="item.id">
				<view style="margin-left: 20px;margin-top: 16px;">
					<u-icon name="clock-fill" size="15"></u-icon>
					<view style="margin-left: 26px;margin-top: -20px;color: #3C9CFF;">{{item.estimatedTime}}分钟内</view>
					<view style="margin-left: 98px;margin-top: -21px">送达</view>
					<view style="margin-left: 206px;margin-top: -20px;color: #3C9CFF;">挑战值</view>
					<view style="margin-left: 260px;margin-top: -21px">
						<u-icon name="arrow-up-fill" :color="color1" size="2" class="icon-test1"></u-icon>
						<u-icon name="arrow-up-fill" :color="color2" size="2" class="icon-test2"></u-icon>
						<u-icon name="arrow-up-fill" :color="color3" size="2" class="icon-test3"></u-icon>
					</view>
					<view style="margin-left: 308px;margin-top: -20px;color: red;font-size: 25px;">
						{{item.distributionPrice}}
					</view>
					<view style="margin-left: 323px;margin-top: -28px;color: red;">元</view>
				</view>
				<view>
					<view style="margin-left: 20px;margin-top: 20px;">
						{{item.riderShopDistance}}km
					</view>
					<view style="margin-left: 100px;margin-top: -25px;font-size: 20px;">
						{{item.shopAddress}}
					</view>
					<view
						style="height: 60px;width: 20px;margin-left: 43px;border-left: 1px solid black;margin-top: 2px;">

					</view>
					<view style="margin-left: 20px;margin-top: 2px;">
						{{item.userShopDistance}}km
					</view>
					<view style="margin-left: 100px;margin-top: -24px;font-size: 20px;">
						{{item.userAddress}}
					</view>
					<view class="view-buttom1">
						<u-button text="抢单" size="normal" type="primary" class="button-x" @click="qiangdan(item)">
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="view-body" v-if="daiquhuo">
			<view class="view-daiquhuo" v-for="(item) in getOrders" :key="item.id">
				<view :style="a">
					<view style="font-size: 20px;margin-top: -20px;" v-if="item.ramainingItem!='已超时'">还剩</view>
					<view style="margin-left:45px;margin-top: -25px;color: red;font-size: 20px;">{{item.ramainingItem}}
					</view>
					<view style="margin-left:68px;margin-top: -26px;font-size: 20px;" v-if="item.ramainingItem!='已超时'">分钟</view>
					<view style="margin-left:120px;margin-top: -26px;font-size: 20px;">{{item.deliveryTime}} 前送达</view>
					<view style="margin-left:270px;margin-top: -28px;font-size: 23px;">{{item.takeOutNumber}}</view>
					<view style="margin-left:0px;margin-top: 10px;font-size: 20px;">{{item.shopAddress}}</view>
					<view style="margin-left:0px;margin-top: 10px;font-size: 10px;">距离商家 {{item.riderShopDistance}} 公里
					</view>
					<view style="width: 350px;height: 70px;background: #F8FAFB;overflow: hidden;">
						<view style="font-size: 10px;margin-top: 12px;margin-left: 10px;">重量：{{item.weight}}kg</view>
						<view style="font-size: 10px;margin-top: 12px;margin-left: 10px;">备注：{{item.remark}}</view>
					</view>
					<view style="margin-top: 10px;">
						<u-button text="取到商品" size="normal" type="primary" class="button-a" @click="getshangpin(item)">
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="view-body" v-if="peisongzhong">
			<view class="view-daiquhuo" v-for="(item) in DeliveryOrders" :key="item.id">
				<view :style="b">
					<view style="font-size: 20px;margin-top: -20px;" v-if="item.ramainingItem!='已超时'">还剩</view>
					<view style="margin-left:45px;margin-top: -25px;color: red;font-size: 20px;">{{item.ramainingItem}}
					</view>
					<view style="margin-left:68px;margin-top: -26px;font-size: 20px" v-if="item.ramainingItem!='已超时'">分钟</view>
					<view style="margin-left:120px;margin-top: -26px;font-size: 20px;">{{item.deliveryTime}} 前送达</view>
					<view style="margin-left:270px;margin-top: -28px;font-size: 23px;">{{item.takeOutNumber}}</view>
					<view style="margin-left:0px;margin-top: 10px;font-size: 20px;">{{item.shopAddress}}</view>
					<view style="margin-left:0px;margin-top: 10px;font-size: 10px;">距离用户 {{item.userShopDistance}} 公里
					</view>
					<view style="width: 350px;height: 70px;background: #F8FAFB;overflow: hidden;">
						<view style="font-size: 10px;margin-top: 12px;margin-left: 10px;">重量：{{item.weight}}kg</view>
						<view style="font-size: 10px;margin-top: 12px;margin-left: 10px;">备注：{{item.remark}}</view>
					</view>
					<view style="margin-top: 10px;">
						<u-button text="商品已送到,联系用户" size="normal" type="primary" class="button-a"
							@click="shangpinsongdao(item)"></u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="view-body1" v-if="xiaxian">
			<u--image :showLoading="true" src="../../../static/内容为空.png" class="image"></u--image>
			<view style="font-size: 20px;margin-left: 160px;margin-top: 20px;">{{test}}</view>
		</view>
		<view class="view-buttom" v-show="shangxianButton">
			<u-button text="上线" size="normal" type="primary" class="button-u" icon="arrow-upward" @click="shangxian">
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '', //骑手的用户表ID
				orders: [], //所有订单
				getOrders: [], //待取货配送中订单
				DeliveryOrders: [], //配送中订单
				phone: '', //手机号
				showgerxinxi: false, //开启左侧弹窗
				iconcolor: '#F73437',
				riderLat: '', //骑手纬度
				riderLng: '', //骑手经度
				renwu: false, //新任务展示
				xiaxian: true, //下线页面展示
				daiquhuo: false, //待取货页面展示
				peisongzhong: false, //配送中页面展示
				zanwudingdan: false, //暂无订单展示
				shangxianButton: true, //上线按钮展示
				todayMoney:'',//今日账单
				ordersNumber:'',//今日订单量
				a:{
					
				},
				b:{
					
				},
				color1: '',
				color2: '',
				color3: '',
				color: '',
				test: '请先上线',
				name: '下线中',
				title: '请选择',
				list: [{
						name: '上线'
					},
					{
						name: '下线'
					}
				],
				show: false,
				list1: ['新任务', '待取货', '配送中'],
				curNow: 0,
				listicon: [{
						name: '../../../static/乐跑计划.jpg',
						title: '乐跑计划'
					},
					{
						name: '../../../static/客服中心.jpg',
						title: '客服中心'
					},
					{
						name: '../../../static/年度盘点.jpg',
						title: '培训中心'
					},
					{
						name: '../../../static/骑手保险.jpg',
						title: '骑手保险'
					},
					{
						name: '../../../static/骑手商城.jpg',
						title: '骑手商城'
					},
					{
						name: '../../../static/骑手社区.jpg',
						title: '骑手社区'
					},
					{
						name: '../../../static/年度盘点.jpg',
						title: '年度盘点'
					},
				],
				listtext: [{
						type: 'default',
						title: '我的健康证',
						iconUrl: 'https://img0.baidu.com/it/u=3081543571,733245944&fm=253&fmt=auto&app=138&f=JPEG?w=618&h=500'
					},
					{
						type: 'error',
						icon: false,
						title: '我的装备',
						iconUrl: 'https://img0.baidu.com/it/u=1433108929,2078640498&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
					},
					{
						type: 'success',
						title: '我的福利',
						iconUrl: 'https://img2.baidu.com/it/u=3080021382,2198043104&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
					},
				],
			}
		},
		onLoad(options) {
			this.name = "下线中"
			this.color = "#2C2C2C"
			this.iconcolor = "#F73437"
			this.phone = uni.getStorageSync('phone')
			this.id = uni.getStorageSync('id')
			this.test = "请先上线"
		},
		methods: {
			//跳转到订单统计
			orderStatistics() {
				uni.navigateTo({
					url: '/pages/workview/historyOrders/historyOrders?riderId=' +this.id,
				})
			},
			//跳转到我的账户
			myAccount() {
				uni.navigateTo({
					url: '/pages/workview/myAccount/myAccount?riderId=' +this.id,
				})
			},
			//关闭左侧弹出层
			close() {
				this.showgerxinxi = false
			},
			//弹出个人信息
			tanchu() {
				this.showgerxinxi = true
				this.$myRequest({
					url:'/eat-service/rider/getAccountOrders',
					method:'get',
					data:{
						'id':uni.getStorageSync('id')
					}
				}).then(res=>{
					uni.setStorageSync('todayMoney',res.data.obj.todayMoney)
					uni.setStorageSync('ordersNumber',res.data.obj.ordersNumber)
					this.todayMoney = res.data.obj.todayMoney
					this.ordersNumber = res.data.obj.ordersNumber

				})
			},
			//抢单
			qiangdan(item) {
				this.riderLng = uni.getStorageSync('riderLng')
				this.riderLat = uni.getStorageSync('riderLat')
				this.$myRequest({
					url: '/eat-service/commodityOrder/snatchOrders',
					method: 'get',
					data: {
						'id': this.id,
						'orderId': item.id,
						'type': 3,
						'riderLng': this.riderLng,
						'riderLat': this.riderLat
					}
				}).then(res => {
					uni.showToast({
						title: '抢单成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					this.findAllOrders()
					this.OrderPicked()
					this.DeliveryOrder()
				})
			},
			//取到商品
			getshangpin(item) {
				this.riderLng = uni.getStorageSync('riderLng')
				this.riderLat = uni.getStorageSync('riderLat')
				this.$myRequest({
					url: '/eat-service/commodityOrder/snatchOrders',
					method: 'get',
					data: {
						'id': this.id,
						'orderId': item.id,
						'type': 4,
						'riderLng': this.riderLng,
						'riderLat': this.riderLat
					}
				}).then(res => {
					this.findAllOrders()
					this.OrderPicked()
					this.DeliveryOrder()
				})
			},
			//根据骑手所在县查询待取货订单
			OrderPicked() {
				this.riderLng = uni.getStorageSync('riderLng')
				this.riderLat = uni.getStorageSync('riderLat')
				this.$myRequest({
					url: '/eat-service/commodityOrder/findAllOrders',
					method: 'get',
					data: {
						'phone': this.phone,
						'riderLat': this.riderLat,
						'riderLng': this.riderLng,
						'id': this.id,
						'status': 3,
					}
				}).then(res => {
					this.getOrders = res.data.obj
					for(var i =0;i<this.getOrders.length;i++){	
							this.a={
								'margin-top': '30px',
								'margin-left': '20px'
							}
					}
					this.getTime(res.data.obj)
					if (this.curNow == 0) {
						if (this.name === "上线中") {
							if (this.orders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
					}
					if (this.orders.length > 0 && this.name != "下线中") {
						this.renwu = true
						this.daiquhuo = false
						this.peisongzhong = false
						this.xiaxian = false
					}
					if (this.curNow == 1) {
						if (this.name === "上线中") {
							if (this.getOrders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
						if (this.getOrders.length > 0 && this.name != "下线中") {
							this.renwu = false
							this.daiquhuo = true
							this.xiaxian = false
							this.peisongzhong = false
						}
					}
					if (this.curNow == 2) {
						if (this.name === "上线中") {
							if (this.DeliveryOrders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
						if (this.DeliveryOrders.length > 0 && this.name != "下线中") {
							this.renwu = false
							this.daiquhuo = false
							this.xiaxian = false
							this.peisongzhong = true
						}
					}
				})
			},
			//商品送达
			shangpinsongdao(item) {
				this.$myRequest({
					url:'/eat-service/rider/todayTask',
					method:'get',
					data:{
						'id':item.id,
						'riderId':item.riderId,
						'distributionPrice':item.distributionPrice
					}
				}).then(res=>{
					this.findAllOrders()
					this.OrderPicked()
					this.DeliveryOrder()
				})
			},
			//查询配送中订单
			DeliveryOrder() {
				this.riderLng = uni.getStorageSync('riderLng')
				this.riderLat = uni.getStorageSync('riderLat')
				this.$myRequest({
					url: '/eat-service/commodityOrder/findAllOrders',
					method: 'get',
					data: {
						'phone': this.phone,
						'riderLat': this.riderLat,
						'riderLng': this.riderLng,
						'id': this.id,
						'status': 4,
					}
				}).then(res => {
					this.DeliveryOrders = res.data.obj
					for(var i =0;i<this.DeliveryOrders.length;i++){
							this.b={
								'margin-top': '30px',
								'margin-left': '20px'
							}
					}
					this.getTime(res.data.obj)
					if (this.curNow == 0) {
						if (this.name === "上线中") {
							if (this.orders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
					}
					if (this.orders.length > 0 && this.name != "下线中") {
						this.renwu = true
						this.daiquhuo = false
						this.peisongzhong = false
						this.xiaxian = false
					}
					if (this.curNow == 1) {
						if (this.name === "上线中") {
							if (this.getOrders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
						if (this.getOrders.length > 0 && this.name != "下线中") {
							this.renwu = false
							this.daiquhuo = true
							this.xiaxian = false
							this.peisongzhong = false
						}
					}
					if (this.curNow == 2) {
						if (this.name === "上线中") {
							if (this.DeliveryOrders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
						if (this.DeliveryOrders.length > 0 && this.name != "下线中") {
							this.renwu = false
							this.daiquhuo = false
							this.xiaxian = false
							this.peisongzhong = true
						}
					}
				})
			},
			//上线按钮
			shangxian() {
				this.name = "上线中"
				this.iconcolor = "#3C9CFF"
				this.shangxianButton = false
				this.$myRequest({
					url: '/eat-service/rider/updateStatus',
					method: 'get',
					data: {
						'phone': this.phone,
						'name': this.name
					}
				})
				this.findAllOrders()
				this.OrderPicked()
				this.DeliveryOrder()

			},
			//根据骑手所在县查询订单
			findAllOrders() {
				this.riderLng = uni.getStorageSync('riderLng')
				this.riderLat = uni.getStorageSync('riderLat')
				this.$myRequest({
					url: '/eat-service/commodityOrder/findAllOrders',
					method: 'get',
					data: {
						'phone': this.phone,
						'riderLat': this.riderLat,
						'riderLng': this.riderLng
					}
				}).then(res => {
					this.orders = res.data.obj
					for (let i = 0; i < this.orders.length; i++) {
						if (this.orders[i].totalDistance < 1) {
							this.color1 = "#2979ff"
							this.color2 = ""
							this.color3 = ""
						}
						if (this.orders[i].totalDistance > 1 && this.orders[i].totalDistance < 2) {
							this.color1 = "#2979ff"
							this.color2 = "#2979ff"
							this.color3 = ""
						}
						if (this.orders[i].totalDistance > 2) {
							this.color1 = "#2979ff"
							this.color2 = "#2979ff"
							this.color3 = "#2979ff"
						}
					}
					if (this.curNow == 0) {
						if (this.name === "上线中") {
							if (this.orders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
					}
					if (this.orders.length > 0 && this.name != "下线中") {
						this.renwu = true
						this.daiquhuo = false
						this.peisongzhong = false
						this.xiaxian = false
					}
					if (this.curNow == 1) {
						if (this.name === "上线中") {
							if (this.getOrders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
						if (this.getOrders.length > 0 && this.name != "下线中") {
							this.renwu = false
							this.daiquhuo = true
							this.xiaxian = false
							this.peisongzhong = false
						}
					}
					if (this.curNow == 2) {
						if (this.name === "上线中") {
							if (this.DeliveryOrders.length < 1) {
								this.test = "暂无订单"
								this.xiaxian = true
								this.renwu = false
								this.daiquhuo = false
								this.peisongzhong = false
							}
						}
						if (this.DeliveryOrders.length > 0 && this.name != "下线中") {
							this.renwu = false
							this.daiquhuo = false
							this.xiaxian = false
							this.peisongzhong = true
						}
					}
				})
			},
			//每隔一分钟减一分钟
			getTime(data) {
				const timer = setInterval(() => {
					// 这里调用调用需要执行的方法，1为自定义的参数，由于特殊的需求它将用来区分，定时器调用和手工调用，然后执行不同的业务逻辑
					for (var i = 0; i < data.length; i++) {
						if(data[i].ramainingItem === "已超时"){
							data[i].ramainingItem = "已超时"
						}else{
							if(parseInt(data[i].ramainingItem) <=1){
							data[i].ramainingItem = "已超时"
						}else{
							data[i].ramainingItem = parseInt(data[i].ramainingItem) - 1
						}
						}
						
						
						uni.request({
							url: 'http://127.0.0.1:15000/eat-service/commodityOrder/updateTime',
							header: {
								token: uni.getStorageSync('token')
							},
							method: 'post',
							data: JSON.stringify(data[i])
						})
					}
				}, 60000) // 每两秒执行1次
				// 通过$once来监听定时器，在beforeDestroy钩子可以被清除
				this.$once('hook:beforeDestroy', () => {
					// 在页面销毁时，销毁定时器
					clearInterval(timer)
				})
			},
			//下拉框更改骑手状态
			selectClick(index) {
				this.name = index.name + '中'
				if (this.name === "下线中") {
					this.test = "请先上线"
				}
				this.$myRequest({
					url: '/eat-service/rider/updateStatus',
					method: 'get',
					data: {
						'phone': this.phone,
						'name': this.name
					}
				}).then(res => {
					if (this.name === "上线中") {
						this.iconcolor = "#3C9CFF"
						this.shangxianButton = false
						this.OrderPicked()
						this.findAllOrders()
						this.DeliveryOrder()
					}
				})
				if (this.name == "下线中") {
					this.color = "#2C2C2C"
					this.iconcolor = "#F73437"
					this.shangxianButton = true
					this.xiaxian = true
					this.renwu = false
					this.daiquhuo = false
					this.peisongzhong = false
				}
				this.show = false
			},
			//分段器切换页面
			sectionChange(index) {
				this.curNow = index;
				if (this.curNow == 0 && this.name == "上线中") {
					if (this.orders.length < 1) {
						this.test = "暂无订单"
						this.xiaxian = true
						this.renwu = false
						this.daiquhuo = false
						this.peisongzhong = false
					}
					if (this.orders.length > 0) {
						this.renwu = true
						this.xiaxian = false
						this.daiquhuo = false
						this.peisongzhong = false
					}
				}
				if (this.curNow == 1 && this.name == "上线中") {
					if (this.getOrders.length < 1) {
						this.test = "暂无订单"
						this.xiaxian = true
						this.renwu = false
						this.daiquhuo = false
						this.peisongzhong = false
					}
					if (this.getOrders.length > 0) {
						this.daiquhuo = true
						this.renwu = false
						this.xiaxian = false
						this.peisongzhong = false
					}
				}
				if (this.curNow == 2 && this.name == "上线中") {
					if (this.DeliveryOrders.length < 1) {
						this.test = "暂无订单"
						this.xiaxian = true
						this.renwu = false
						this.daiquhuo = false
						this.peisongzhong = false
					}
					if (this.DeliveryOrders.length > 0) {
						this.peisongzhong = true
						this.renwu = false
						this.daiquhuo = false
						this.xiaxian = false
					}
				}
				if (this.name == "下线中") {
					this.xiaxian = true
					this.peisongzhong = false
					this.renwu = false
					this.daiquhuo = false
				}
			}
		}
	}
</script>

<style>
	.tanchuang-body {
		background: #F3F3F3;
		height: 900px;
	}

	.button-x {
		margin-top: 10px;
		width: 360px;
	}

	.image {
		margin-top: 160px;
		margin-left: 60px;
	}

	.view-body1 {
		width: 100%;
		background: #FFFFFF;
		overflow: hidden;
	}

	.icon-test1 {
		margin-left: 0px;
		margin-top: 12px;
	}

	.icon-test2 {
		margin-left: 12px;
		margin-top: -2px;
	}

	.icon-test3 {
		margin-left: 23px;
		margin-top: -2px;
	}

	.view-mess {
		width: 380px;
		height: 234px;
		margin-left: 18px;
		background: #FFFFFF;
		margin-top: 10px;
		border-radius: 10px;
		overflow: hidden;
	}

	.view-daiquhuo {
		width: 380px;
		height: 230px;
		margin-left: 18px;
		background: #FFFFFF;
		margin-top: 10px;
		border-radius: 10px;
		overflow: hidden;
	}

	.view-body {
		width: 100%;
		background: #F7F7F6;
		height: 722px;
		overflow: hidden;
		overflow: scroll;
	}

	.button-u {
		width: 300px;
		margin-top: 10px;
	}

	.u-subsection {
		width: 400px;
		margin-top: 43px;
		margin-left: 4px;
	}

	.button {
		overflow: hidden;
		margin-top: -30px;
		width: 75px;
		margin-left: 30px;
	}

	.icon-a {
		margin-top: 13px;
		margin-left: 14px;
	}

	.view-top {
		width: 100%;
		height: 130px;
		background: #1A1A1A;
		overflow: hidden;
	}

	.zuoce-renwulan {
		width: 40px;
		height: 40px;
		border-radius: 50px;
		background: #2C2C2C;
		margin-left: 20px;
		margin-top: 15px;
		overflow: hidden;
	}

	.zuoce-tishi {
		width: 40px;
		height: 40px;
		border-radius: 50px;
		background: #2C2C2C;
		margin-left: 360px;
		margin-top: -40px;
		overflow: hidden;
	}

	.button-a {
		width: 350px;
		margin-left: 1px;
		border-radius: 30px;
	}

	.zuoce-zhuangtai {
		width: 100px;
		height: 40px;
		border-radius: 50px;
		background: #2C2C2C;
		margin-left: 80px;
		margin-top: -40px;
		overflow: hidden;
	}

	.icon {
		margin-left: 8px;
		margin-top: 8px;
	}

	.view-buttom1 {
		width: 100%;
		height: 50px;
		overflow: hidden;
		margin-top: 8px;
	}

	.view-buttom {
		position: fixed;
		top: 820px;
		width: 100%;
		height: 60px;
		overflow: hidden;
	}
</style>
